<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery插件练习</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <!--<script src="../js/jquery-2.2.0.js"></script>-->
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/jquery.cookie-1.4.1.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #faecff;
        }

        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }

        h3 {
            text-align: center;
        }

        .trBgColor {
            background: #ffdccd;
        }

        #resText1, #resText2, #resText3 {
            border: #666 1px solid;
            padding: 10px;
        }

        .text {
            background-color: #00FF00;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>jQuery插件练习</h1>
    <hr>
    <br>
    <h3>自定义选择器插件——between()</h3>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <table id="table" class="table table-bordered">
                <thead>
                <tr>
                    <th>选择</th>
                    <th>姓 名</th>
                    <th>性 别</th>
                    <th>出生年份</th>
                    <th>家乡</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input name="celebrity" type="checkbox" checked></td>
                    <td>贝多芬</td>
                    <td>男</td>
                    <td>1770</td>
                    <td>德国-波恩</td>
                </tr>
                <tr>
                    <td><input name="celebrity" type="checkbox"></td>
                    <td>莫扎特</td>
                    <td>男</td>
                    <td>1756</td>
                    <td>德国-萨尔兹堡</td>
                </tr>
                <tr>
                    <td><input name="celebrity" type="checkbox" checked></td>
                    <td>爱因斯坦</td>
                    <td>男</td>
                    <td>1879</td>
                    <td>德国-乌尔姆市</td>
                </tr>
                <tr>
                    <td><input name="celebrity" type="checkbox"></td>
                    <td>居里夫人</td>
                    <td>女</td>
                    <td>1867</td>
                    <td>波兰-华沙</td>
                </tr>
                <tr>
                    <td><input name="celebrity" type="checkbox"></td>
                    <td>米开朗琪罗</td>
                    <td>男</td>
                    <td>1475</td>
                    <td>意大利-佛罗伦萨</td>
                </tr>
                <tr>
                    <td><input name="celebrity" type="checkbox"></td>
                    <td>毛泽东</td>
                    <td>男</td>
                    <td>1893</td>
                    <td>中国-湖南湘潭</td>
                </tr>
                <tr>
                    <td><input name="celebrity" type="checkbox"></td>
                    <td>武则天</td>
                    <td>女</td>
                    <td>624</td>
                    <td>中国-山西文水</td>
                </tr>
                <tr>
                    <td><input name="celebrity" type="checkbox"></td>
                    <td>朱元璋</td>
                    <td>男</td>
                    <td>1328</td>
                    <td>中国-安徽凤阳</td>
                </tr>
                <tr>
                    <td><input name="celebrity" type="checkbox"></td>
                    <td>凤姐</td>
                    <td>女</td>
                    <td>1985</td>
                    <td>中国-重庆纂江</td>
                </tr>
                </tbody>
            </table>
            <hr>
        </div>
    </div>
    <div style="height: 500px"></div>
</div>
<script>

    $.expr[':'].test = function(obj, index, meta, stack) {
        /* obj   - is a current DOM element 当前DOM元素
         index - the current loop index in stack 当前元素在stack中的索引，
         meta  - meta data about your selector !!! 用来存参数值，详见带参数的自定义选择器。
         stack - stack of all elements to loop 选择器所选中的元素集。

         Return true to include current element 返回 true 就包含当前元素
         Return false to explude current element 返回 false 就抛弃当前元素
         */
    };

/*    ;(function ($) {
        $.extend(jQuery.expr[":"].test=function (a, i, m, stack) {
                var temp = m[3].split(",");
                return temp[0] - 0 < i && i < temp[1] - 0;

        });
    })(jQuery);*/

    $("tr:test(3,4)").addClass("trBgColor");
</script>
</body>
</html>